<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
	<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px; margin:80px auto; position:relative; z-index:10000;}
#divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333; 
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
#divselect ul li{height:24px; line-height:24px;}
#divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
	</style>
   <script type="text/javascript">
   var client = function(){

//rendering engines
var engine = {            
    ie: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera: 0,

    //complete version
    ver: null  
};

//browsers
var browser = {
    
    //browsers
    ie: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,
    safari: 0,

    //specific version
    ver: null
};


//platform/device/OS
var system = {
    win: false,
    mac: false,
    x11: false,
    
    //mobile devices
    iphone: false,
    ipod: false,
    ipad: false,
    ios: false,
    android: false,
    nokiaN: false,
    winMobile: false,
    
    //game systems
    wii: false,
    ps: false 
};    

//detect rendering engines/browsers
var ua = navigator.userAgent;    
if (window.opera){
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
    
    //figure out if it's Chrome or Safari
    if (/Chrome\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.chrome = parseFloat(browser.ver);
    } else if (/Version\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.safari = parseFloat(browser.ver);
    } else {
        //approximate version
        var safariVersion = 1;
        if (engine.webkit < 100){
            safariVersion = 1;
        } else if (engine.webkit < 312){
            safariVersion = 1.2;
        } else if (engine.webkit < 412){
            safariVersion = 1.3;
        } else {
            safariVersion = 2;
        }   
        
        browser.safari = browser.ver = safariVersion;        
    }
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    
    //determine if it's Firefox
    if (/Firefox\/(\S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
} else if (/MSIE ([^;]+)/.test(ua)){    
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}

//detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera;


//detect platform
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

//detect windows operating systems
if (system.win){
    if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
        if (RegExp["$1"] == "NT"){
            switch(RegExp["$2"]){
                case "5.0":
                    system.win = "2000";
                    break;
                case "5.1":
                    system.win = "XP";
                    break;
                case "6.0":
                    system.win = "Vista";
                    break;
                case "6.1":
                    system.win = "7";
                    break;
                default:
                    system.win = "NT";
                    break;                
            }                            
        } else if (RegExp["$1"] == "9x"){
            system.win = "ME";
        } else {
            system.win = RegExp["$1"];
        }
    }
}

//mobile devices
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
system.winMobile = (system.win == "CE");

//determine iOS version
if (system.mac && ua.indexOf("Mobile") > -1){
    if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
        system.ios = parseFloat(RegExp.$1.replace("_", "."));
    } else {
        system.ios = 2;  //can't really detect - so guess
    }
}

//determine Android version
if (/Android (\d+\.\d+)/.test(ua)){
    system.android = parseFloat(RegExp.$1);
}

//gaming systems
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);

//return it
return {
    engine:     engine,
    browser:    browser,
    system:     system        
};

}();
   var EventUtil = {

addHandler: function(element, type, handler){
    if (element.addEventListener){
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent){
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
},

getButton: function(event){
    if (document.implementation.hasFeature("MouseEvents", "2.0")){
        return event.button;
    } else {
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4: return 1;
        }
    }
},

getCharCode: function(event){
    if (typeof event.charCode == "number"){
        return event.charCode;
    } else {
        return event.keyCode;
    }
},

getClipboardText: function(event){
    var clipboardData =  (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
},

getEvent: function(event){
    return event ? event : window.event;
},

getRelatedTarget: function(event){
    if (event.relatedTarget){
        return event.relatedTarget;
    } else if (event.toElement){
        return event.toElement;
    } else if (event.fromElement){
        return event.fromElement;
    } else {
        return null;
    }

},

getTarget: function(event){
    return event.target || event.srcElement;
},

getWheelDelta: function(event){
    if (event.wheelDelta){
        return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
    } else {
        return -event.detail * 40;
    }
},

preventDefault: function(event){
    if (event.preventDefault){
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
},

removeHandler: function(element, type, handler){
    if (element.removeEventListener){
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent){
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
},

setClipboardText: function(event, value){
    if (event.clipboardData){
        event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        window.clipboardData.setData("text", value);
    }
},

stopPropagation: function(event){
    if (event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

};
  

/**
   1、实现点击菜单中的向下三角展开菜单，
   2、点击页面空白处收起菜单，
   3、按下键盘上的向上、向下方向键(循环)可以选中对应的选项，
   4、鼠标滑入选项时有选中效果，滑出时去掉选中效果
   5、鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题
   **/
window.onload=function(){
	var box=document.getElementById('divselect'),
	    title=box.getElementsByTagName('cite')[0],
	    menu=box.getElementsByTagName('ul')[0],
	    as=box.getElementsByTagName('a'),
        index=0;
   
    // 点击三角时 找不到三角的图片 就当选中cite标签吧
    title.onclick=function(event){
      // 执行脚本
      
     if(menu.style.display === 'none' || menu.style.display===''){
      title.innerText='请选择分类';
      menu.style.display='block';
      index=0;
      document.getElementById('li').style.background='red';
     }
    }  
    
   // 滑过滑过、离开、点击每个选项时
      // 执行脚本

   // 点击页面空白处时
       // 执行脚本



 var mousewheell = function(event){
      if(menu.style.display==='block'){
         event = EventUtil.getEvent(event);
         var datel = EventUtil.getWheelDelta(event);
         if(datel<0){
            var that = index;
            ++index;
            changeLiBackGround(that);
         }
         if(datel>0){
            var that = index;
            --index;
            changeLiBackGround(that);
         }

      }
      
   }
   function changeLiBackGround(that){
      if(index<0){
               index=4;
            }
            if(index>4){
               index=0
            }
            
            document.getElementsByTagName('li')[index].style.background='red';
            document.getElementsByTagName('li')[that].style.background='#fff';
   }
   EventUtil.addHandler(document,'mousewheel',mousewheell)    
   EventUtil.addHandler(document,'DOMMouseScroll',mousewheell)    
   EventUtil.addHandler(document,'keypress',function(event){
      event = EventUtil.getEvent(event);
      var code = EventUtil.getCharCode(event);
      if(code === 13){
         title.innerText=document.getElementsByTagName('li')[index].innerText;
         document.getElementsByTagName('li')[index].style.background='#fff';
         menu.style.display='none';
      }
   })

   EventUtil.addHandler(document,'click',function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if(target.tagName.toUpperCase()==='A'){
         title.innerText=target.innerText;
         menu.style.display='none';
         document.getElementsByTagName('li')[index].style.background='#fff';
      }else if(target.tagName.toUpperCase()!=='CITE'){
         menu.style.display='none';
         document.getElementsByTagName('li')[index].style.background='#fff';
      }
      
   })
   EventUtil.addHandler(document,'mouseout',function(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getRelatedTarget(event);
      if(target.tagName && target.tagName.toUpperCase()==='A'){
      var that = index;
      index = target.getAttribute('selectid')-1;
      document.getElementsByTagName('li')[that].style.background='#fff';
      target.parentElement.style.background='red';
      }
   })
 }
   </script>
</head>
<body>
	<div id="divselect">
      <cite>请选择分类</cite>
      <ul>
         <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
         <li><a href="javascript:;" selectid="2">.NET开发</a></li>
         <li><a href="javascript:;" selectid="3">PHP开发</a></li>
         <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
         <li><a href="javascript:;" selectid="5">Java特效</a></li>
      </ul>
    </div>
</body>
</html>